<template>
	<view class="">
		<u-navbar bgColor="#2FCC71" leftIconColor="#fff" titleStyle="color:#fff" placeholder title="订单"
			:autoBack="true"></u-navbar>
		<view style="height: 80rpx;">
			<tui-tabs :tabs="tabList" isFixed :top="offsetTop" :currentTab="currentTab" selectedColor="#2FCC71"
				sliderBgColor="#2FCC71" itemWidth="50%" @change="changeTab"></tui-tabs>
		</view>



		<view class="order-list" v-for="(row, num) in goodList" :key="num" @click="goDetail">
			<view class="flex-row" style="margin-bottom: 23rpx;">
				<view>{{row.createTime}}</view>
				<view v-if="row.status === '0'" style="margin-left: auto;color: #E93325;">待发货</view>
				<view v-if="row.status === '10'" style="margin-left: auto;color: #E93325;">待验收</view>
				<view v-if="row.status === '20'" style="margin-left: auto;color: #E93325;">待入库</view>
				<view v-if="row.status === '30'" style="margin-left: auto;color: #E93325;">待结算</view>
				<view v-if="row.status === '40'" style="margin-left: auto;color: #E93325;">已结算</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="goods-list" v-for="(item, index) in row.list" :key="index">
				<view class="goods-list__box">
					<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
					<view class="goods-list__box__right">
						<view class="goods-list__box__top">
							<view class="goods-list__box__title">{{ item.goodsName }}</view>
						</view>
						<view style="display: flex;align-items: center;margin-top: 15rpx;">
							<view class="goods-list__box__bot">规格：{{item.spc}}</view>

						</view>
						<view style="display: flex;align-items: center;margin-top: 15rpx;">
							<view class="goods-list__box__bot">单价：{{item.unitPrice}}</view>
							<view class="goods-list__box__bot" style="margin-left: 23rpx;">
								重量：{{(item.weight)}}斤</view>
						</view>
					</view>
				</view>
				<view class="item-price">￥{{ (item.weight * item.unitPrice).toFixed(2) }}</view>
				<view class="item-num">x{{item.count}}</view>
			</view>

			<view style="margin-top: 23rpx;">
				<u-line color="#d8d8d8"></u-line>
			</view>

			<view class="total-al">
				总价：
				<text style="color: #E93325;font-size: 31rpx;">￥{{getTolo(row)}}</text>

			</view>
			<view class="order-but" v-if="status!=20">
				<view class="look-detail" @click.stop="submitForm(row)">
					确认发货
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 100,
				goodList: [],
				flag: true,
				currentTab: 0,
				status: '0',
				tabList: [{
						name: '待发货',
						type: '0'
					},
					{
						name: '已发货',
						type: '10'
					},
				],
				currenList: []
			}
		},
		props: {
			cureet: {
				type: Number,
				default: 0,
			}
		},

		computed: {
			offsetTop() {
				console.log(uni.getSystemInfoSync().statusBarHeight);
				return Number(uni.getSystemInfoSync().statusBarHeight + 44)
			},
			totlaPrice() {
				let num = 0
				this.goodList.forEach((row) => {
					num = num + Number((row.weight * row.unitPrice).toFixed(2))
				})
				return num.toFixed(2)
			},
		},
		created() {
			this.currentTab = this.cureet
			this.status = this.tabList[this.cureet].type
			this.getList()
		},
		methods: {
			getTolo(row) {
				let num = 0
				row.list.forEach((item) => {
					num = num + Number((item.count * item.unitPrice).toFixed(2))

				})
				return num.toFixed(2)
			},
			async getList() {
				let res = await this.$apis.procurement.shopPurchaseItemorder({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					status: this.status,

				})
				this.goodList = res.rows
				// if (this.goodList.length > 3) {
				// 	this.currenList = this.goodList.slice(0, 3)
				// } else {
				// 	this.currenList = this.goodList
				// }

			},
			changeTab(e) {
				console.log(e);
				this.currentTab = e.index
				this.status = this.tabList[e.index].type
				this.goodList = []
				this.getList()
			},
			openFlag() {
				this.flag = false
				this.currenList = this.goodList
			},
			closeFlag() {
				this.flag = true
				this.currenList = this.goodList.slice(0, 3)
			},
			goDetail() {
				// this.$yrouter.push({
				// 	path: '/procurement/orderDetail/orderDetail'
				// })
			},
			async submitForm() {
				let arr = [];
				this.goodList.forEach((row) => {
					arr.push({
						unitPrice: row.unitPrice,
						goodsId: row.goodsId,
						weight: row.weight,
						id: row.id,
						purchaseId: row.purchaseId,
					});
				});
				let res = await this.$apis.procurement.shopupdatePurchaseItem(JSON.stringify(arr))
				this.getList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.total-al {
		margin-top: 23rpx;
		text-align: right;
		color: #333333;
		font-size: 25rpx;
	}

	.order-but {
		margin-top: 23rpx;
		display: flex;
		justify-content: flex-end;
	}

	.look-detail {
		width: 162rpx;
		height: 58rpx;
		background: #2FCC71;
		border-radius: 29rpx;
		font-size: 23rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order-list {
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 31rpx;
		font-size: 25rpx;
		color: #999999;
		padding: 23rpx;
	}

	.order-tag {
		width: 100%;
		margin-top: 23rpx;
		color: #999999;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 23rpx;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.goods-list {
		margin-top: 23rpx;
		width: 100%;
		background-color: #FFFFFF;
		position: relative;

		.item-price {
			color: #E93325;
			font-size: 28rpx;
			font-weight: 500;
			position: absolute;
			top: 0;
			right: 0;
		}

		.item-num {
			color: #999999;
			font-size: 25rpx;
			position: absolute;
			top: 50rpx;
			right: 0;
		}

		.goods-list__box {

			display: flex;

			.goods-list__box__image {
				width: 138rpx;
				height: 138rpx;
				border-radius: 12rpx;
				flex-shrink: 0;
			}

			.goods-list__box__right {
				flex: 1;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
			}

			.goods-list__box__top {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.goods-list__box__title {

				width: 300rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				color: #999999;
				font-size: 23rpx;
			}




		}

		.item-but {
			display: flex;
			margin-top: 15rpx;
			justify-content: flex-end;
		}

		.look-detail {
			width: 162rpx;
			height: 58rpx;
			background: #2FCC71;
			border-radius: 29rpx;
			font-size: 23rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>